<template>
  <div class="mod-config">
    <el-row>
      <el-col :span="11">
        <span style="font-size: 14px;font-weight:bold;">酒店名称：{{dataForm.hotelName}}</span>
      </el-col>
      <el-col :span="9">
        <span style="font-size: 14px;font-weight:bold;">地址:{{dataForm.address}}</span>
      </el-col>
      <el-col :span="4">
        <span style="font-size: 14px;font-weight:bold;">电话:{{dataForm.phone}}</span>
      </el-col>
    </el-row>
    <el-table :data="dataList" v-loading="dataListLoading" style="margin-top:20px;width: 100%;">
      <el-table-column fixed prop="id" header-align="center" align="center" label="序号" width="50"></el-table-column>
      <el-table-column
        fixed
        prop="roomName"
        header-align="center"
        align="center"
        label="房型名称"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="roomCode"
        header-align="center"
        align="center"
        label="房型编码"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="roomStatus"
        header-align="center"
        align="center"
        label="房型状态"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.roomStatus === 0" size="small" type="success">正常</el-tag>
          <el-tag v-else-if="scope.row.roomStatus === -1" size="small" type="warning">删除</el-tag>
          <el-tag v-else-if="scope.row.roomStatus === -2" size="small" type="warning">停售</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="maxNum" header-align="center" align="center" label="最大人数" width="80"></el-table-column>
      <el-table-column prop="roomSize" header-align="center" align="center" label="房间大小" width="80"></el-table-column>
      <el-table-column
        prop="roomFloor"
        header-align="center"
        align="center"
        label="所在楼层"
        width="80"
      ></el-table-column>
      <el-table-column prop="bedPad" header-align="center" align="center" label="床型" width="80"></el-table-column>
      <el-table-column prop="bedWidth" header-align="center" align="center" label="床宽" width="100"></el-table-column>
      <el-table-column
        prop="roomContent"
        header-align="center"
        align="center"
        label="房间描述"
        width="200"
      ></el-table-column>
      <el-table-column prop="windows" header-align="center" align="center" label="窗户情况" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.windows === 0" size="small" type="info">无窗</el-tag>
          <el-tag v-else-if="scope.row.windows === 1" size="small" type="success">有窗</el-tag>
          <el-tag v-else-if="scope.row.windows === 2" size="small" type="info">部分有窗</el-tag>
          <el-tag v-else-if="scope.row.windows === 3" size="small" type="info">暗窗</el-tag>
          <el-tag v-else-if="scope.row.windows === 4" size="small" type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="windowInfo"
        header-align="center"
        align="center"
        label="窗景描述"
        width="280"
      ></el-table-column>
      <el-table-column
        prop="windowBad"
        header-align="center"
        align="center"
        label="窗户不利因素"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="internet"
        header-align="center"
        align="center"
        label="上网方式"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.internet === 'A'" size="small" type="info">无宽带</el-tag>
          <el-tag v-else-if="scope.row.internet === 'B'" size="small" type="success">免费宽带</el-tag>
          <el-tag v-else-if="scope.row.internet === 'C'" size="small" type="info">收费宽带</el-tag>
          <el-tag v-else-if="scope.row.internet === 'D'" size="small" type="info">部分收费宽带</el-tag>
          <el-tag v-else-if="scope.row.internet === 'E'" size="small" type="info">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="upBed" header-align="center" align="center" label="加床情况" width="120"></el-table-column>
      <el-table-column
        prop="maxChild"
        header-align="center"
        align="center"
        label="最大儿童人数"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="houseType"
        header-align="center"
        align="center"
        label="房型设施"
        width="280"
      ></el-table-column>
      <el-table-column
        prop="isCorrect"
        header-align="center"
        align="center"
        label="人工校准"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isCorrect === 0" size="small" type="info">未校准</el-tag>
          <el-tag v-else-if="scope.row.isCorrect === 1" size="small" type="success">已校准</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="isAutoOrder"
        header-align="center"
        align="center"
        label="自动下单"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isAutoOrder === 0" size="small" type="info">人工下单</el-tag>
          <el-tag v-else-if="scope.row.isAutoOrder === 1" size="small" type="success">自动下单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dataFrom" header-align="center" align="center" label="数据来源" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dataFrom === 1" size="small" type="info">携程</el-tag>
          <el-tag v-else-if="scope.row.dataFrom === 2" size="small" type="success">美团</el-tag>
          <el-tag v-else-if="scope.row.dataFrom === 3" size="small" type="success">官网</el-tag>
          <el-tag v-else-if="scope.row.dataFrom === 4" size="small" type="success">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('ht:htphysicalroom:price')"
            type="text"
            size="small"
            @click="addPrice(dataForm,scope.row)"
          >加价</el-button>
          <el-button
            v-if="isAuth('ht:htphysicalroom:rp')"
            type="text"
            size="small"
            @click="openRP(dataForm,scope.row)"
          >价格计划</el-button>
          <el-button
            v-if="isAuth('ht:htphysicalroom:update')"
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.id)"
          >修改</el-button>
          <el-button
            v-if="isAuth('ht:htphysicalroom:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
          >关房</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './htphysicalroom-add-or-update'
export default {
  data() {
    return {
      dataForm: {
        hotelId: this.$route.params.hotel.id,
        hotelCode: this.$route.params.hotel.hotelCode,
        hotelName: this.$route.params.hotel.hotelName,
        cityNameZh: this.$route.params.hotel.cityNameZh,
        address: this.$route.params.hotel.address,
        phone: this.$route.params.hotel.phone
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  methods: {
    addPrice(hetel, room) {
      this.$router.push({ name: 'op-roomprice', params: { hotel: hetel, room: room } })
    },
    openRP(hetel, room) {
      this.$router.push({ name: 'ht-htlogicroom', params: { hotel: hetel, room: room } })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/ht/htphysicalroom/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'hotelCode': this.dataForm.hotelCode
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/ht/htphysicalroom/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>